<template>
  <div class="alerts-modal-root">
    <transition-group name="list">
      <div class="alert" v-for="alert in currAlerts" :key="alert">
        <div class="icon-box">
          <i class="fa fa-exclamation-triangle"></i>
        </div>
        <div class="alert-content-box">
          <div class="name">
            <span>{{alert.name}}</span>
          </div>
          <div class="alert-content">
            <span>{{alert.message}}</span>
          </div>
          <div class="alert-time">
            <span>{{formatDate(alert.time, true)}}</span>
          </div>
        </div>
        <div class="close-btn" @click="hideAlert(alert)">
          <i class="icon close"></i>
        </div>
        <div class="go-detail-btn" @click="goDetail(alert)">
          查看详情
          <i class="fa fa-angle-right" aria-hidden="true"></i>
        </div>
      </div>
    </transition-group>

  </div>
</template>

<script>
import formatDate from 'filters/format-date'

export default {
  name: 'alert-modal',

  computed: {
    currAlerts () {
      let currAlerts = _.clone(this.$store.getters.currAlerts).reverse()
      return currAlerts
    }
  },

  mounted () {
  },

  methods: {
    formatDate (date, isLocal) {
      return formatDate(date, isLocal)
    },

    hideAlert (alert) {
      this.$store.dispatch('hideAlert', alert)
    },
    goDetail (alert) {
      this.hideAlert(alert)
      if (alert.type === 'water') {
        this.$router.push('/dashboard/water')
      } else {
        this.$router.push('/dashboard/electrical')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>

.alerts-modal-root
  position absolute
  right 10px
  top 60px
  z-index 1000
  .alert
    position absolute
    top 0
    right 0
    width 300px
    min-height 120px
    padding 20px 20px 20px 60px
    box-sizing border-box
    background #bb3932
    color #fff
    font-size 12px
    margin-bottom 10px
    box-shadow -3px 3px 3px 3px rgba(0,0,0,0.4)
    .icon-box
      position absolute
      left 10px
      top 20px
      width 50px
      min-height 60px
      font-size 25px
      padding-left 10px
      box-sizing border-box
    .alert-content-box
      width 100%
      height 100%
      padding-bottom 20px
      box-sizing border-box

      .name
        margin-top 5px
        height 30px
        font-size 13px
        font-weight bold
        overflow hidden
      .alert-content
        padding-bottom 5px
        padding-top 5px


    .close-btn
      position absolute
      right 5px
      top 5px
      width 20px
      height 20px
      background url('../../../assets/images/u208.png') no-repeat center center / 20px auto
    .go-detail-btn
      cursor pointer
      position absolute
      right 20px
      bottom 20px

.list-item
  display: inline-block;
  margin-right: 10px;
.list-enter-active, .list-leave-active
  transition: all 0.3s;
.list-enter
  opacity: 0;
  transform: translateX(30px);
.list-leave-to
  opacity: 0;
  transform: translateX(30px);
.list-move
  transition transform 0.2s
</style>
